<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title>自动气象站数据实时信息发布系统</title>

    <meta name="keywords" content="">
    <meta name="description" content="">

    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->

    <link rel="shortcut icon" href="favicon.ico" th:href="@{/favicon.ico}">
    <link href="css/bootstrap.min.css?v=3.3.6" th:href="@{/css/bootstrap.min.css?v=3.3.6}" rel="stylesheet">
    <link href="css/font-awesome.min.css?v=4.4.0" th:href="@{/css/font-awesome.min.css?v=4.4.0}" rel="stylesheet">
    <link href="css/animate.css" th:href="@{/css/animate.css}" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" th:href="@{/css/style.css?v=4.1.0}" rel="stylesheet">

    <!-- Data Tables -->
    <link href="css/plugins/dataTables/dataTables.bootstrap.css"  th:href="@{/css/plugins/dataTables/dataTables.bootstrap.css}" rel="stylesheet">
    <link href="css/animate.css" th:href="@{/css/animate.css}" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" th:href="@{/css/style.css?v=4.1.0}" rel="stylesheet">

    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4" th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
    <script src="js/bootstrap.min.js?v=3.3.6" th:src="@{/js/bootstrap.min.js?v=3.3.6}" ></script>
    <script src="js/plugins/metisMenu/jquery.metisMenu.js" th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js" th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
    <script src="js/plugins/layer/layer.min.js" th:src="@{/js/plugins/layer/layer.min.js}" ></script>
    <!-- 第三方插件 -->
    <script src="../static/js/jquery-ui.custom.min.js" th:src="@{/js/jquery-ui.custom.min.js}" ></script>
    <script src="../static/js/jquery-ui-1.10.4.min.js" th:src="@{/js/jquery-ui-1.10.4.min.js}"></script>

    <!-- 自定义js -->
    <script src="js/hAdmin.js?v=4.1.0" th:src="@{/js/hAdmin.js?v=4.1.0}"></script>

<!--    1000-->

    <script src="js/plugins/jeditable/jquery.jeditable.js" th:src="@{/js/plugins/jeditable/jquery.jeditable.js}" ></script>

    <!-- Data Tables -->
    <script src="js/plugins/dataTables/jquery.dataTables.js" th:src="@{/js/plugins/dataTables/jquery.dataTables.js}" ></script>
    <script src="js/plugins/dataTables/dataTables.bootstrap.js" th:src="@{/js/plugins/dataTables/dataTables.bootstrap.js}" ></script>

    <!-- 自定义js -->

    <!--    2000-->
</head>

<body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">
<div id="wrapper">
    <!--左侧导航开始-->
    <div th:replace="include/left_navigation_bar::left_navigation_bar_style"></div>
    <!--左侧导航结束-->
    <!--右侧部分开始-->
    <div id="page-wrapper" class="gray-bg dashbard-1">
        <!--头部导航开始-->
        <div th:replace="include/head::head_style"></div>
        <!--头部导航结束-->
        <div class="row J_mainContent" id="content-main">
            <div class="col-sm-12" >
                <div class="ibox-title">
                    <h5>管理员信息管理</h5>
                    <div class="ibox-tools">
                        <button  title="Create new cluster" class="btn btn-primary btn-sm" data-toggle='modal' onclick="openAddUser()" data-target='#addUserModal' >
                            <i class="fa fa-plus"></i>
                            <span class="bold">新增</span>
                        </button>
                    </div>
                </div>
            </div>

            <table id="data_table_name_list" class="table table-striped table-bordered table-hover dataTables-example" >
                <thead>
                    <tr>
                        <th> id</th>
                        <th> 账号</th>
                        <th> 昵称</th>
                        <th> 邮箱</th>
                        <th> 手机号</th>
                        <th> 描述</th>
                        <th> 用户类型</th>
                        <th> 状态</th>
                        <th> 创建时间</th>
                        <th> 修改时间</th>
                        <th> 最后登录时间</th>
                        <th> 修改</th>
                    </tr>
                </thead>
            </table>


        </div>
    </div>
    <!--右侧部分结束-->
</div>

<!-- 修改用户弹窗开始-->
<div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">

        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>修改用户</h5>
            </div>
            <div class="ibox-content">
                <form class="form-horizontal m-t" id="signupForm">
                    <input type="hidden" name="id" id="up_user_id" >
                    <div class="form-group">
                        <label class="col-sm-3 control-label">账号</label>
                        <div class="col-sm-8">
                            <input id="up_user_name" disabled name="name" class="form-control" type="text">
                            <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 账号不可修改</span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">昵称</label>
                        <div class="col-sm-8">
                            <input id="up_user_nick_name" name="nickName" class="form-control" type="text" >
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">邮箱：</label>
                        <div class="col-sm-8">
                            <input id="up_user_email" name="email" class="form-control" type="email">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">手机：</label>
                        <div class="col-sm-8">
                            <input id="up_user_phone" name="phone" class="form-control" type="text" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">描述：</label>
                        <div class="col-sm-8">
                            <input id="up_user_desc" name="desc" class="form-control" type="text" >
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="col-sm-3 control-label">密码：</label>
                        <div class="col-sm-8">
                            <input id="up_user_password" name="password" class="form-control" type="password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">确认密码：</label>
                        <div class="col-sm-8">
                            <input id="up_user_password2" class="form-control" type="password">
                            <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请再次输入您的密码</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">用户类型：</label>
                        <div class="col-sm-8">
                            <select class="form-control m-b" id="up_user_type" name="userType">
                                <option value="0">普通用户</option>
                                <option value="1">管理员</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">状态：</label>
                        <div class="radio radio-inline">
                            <input type="radio" id="status_open" onclick="statusEdit(1)" value="1" name="status">
                            <label for="status_open"> 启用</label>
                        </div>
                        <div class="radio radio-inline">
                            <input type="radio" id="status_off"  onclick="statusEdit(0)" value="0" name="status">
                            <label for="status_off"> 禁用 </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-8 col-sm-offset-3">
                            <button class="btn btn-primary" type="button" onclick="updateUserSubmit()">提交</button>
                            <div class="col-md-1"></div>
                            <button type="button" id="close_button" class="btn btn-white" data-dismiss="modal">关闭</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
<!-- 修改用户弹窗结束 -->

<!-- 添加用户弹窗开始-->
<div class="modal inmodal" id="addUserModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">

        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>新增用户</h5>
            </div>
            <div class="ibox-content">
                <form class="form-horizontal m-t" id="signupForm2">
                    <input type="hidden" name="id" id="add_user_id" >
                    <div class="form-group">
                        <label class="col-sm-3 control-label">账号</label>
                        <div class="col-sm-8">
                            <input id="add_user_name" name="name" class="form-control" type="text" onchange="verificationName()" >
                            <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 账号必须唯一</span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">昵称</label>
                        <div class="col-sm-8">
                            <input id="add_user_nick_name" name="nickName" class="form-control" type="text" >
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">邮箱：</label>
                        <div class="col-sm-8">
                            <input id="add_user_email" name="email" class="form-control" type="email">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">手机：</label>
                        <div class="col-sm-8">
                            <input id="add_user_phone" name="phone" class="form-control" type="text" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">描述：</label>
                        <div class="col-sm-8">
                            <input id="add_user_desc" name="desc" class="form-control" type="text" >
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="col-sm-3 control-label">密码：</label>
                        <div class="col-sm-8">
                            <input id="add_user_password" name="password" class="form-control" type="password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">确认密码：</label>
                        <div class="col-sm-8">
                            <input id="add_user_password2" class="form-control" type="password">
                            <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请再次输入您的密码</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">用户类型：</label>
                        <div class="col-sm-8">
                            <select class="form-control m-b" id="add_user_type" name="userType">
                                <option value="0" selected>普通用户</option>
                                <option value="1">管理员</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">状态：</label>
                        <div class="radio radio-inline">
                            <input type="radio" id="add_status_open" onclick="addStatusEdit(1)" value="1" name="status">
                            <label for="status_open"> 启用</label>
                        </div>
                        <div class="radio radio-inline">
                            <input type="radio" id="add_status_off"  onclick="addStatusEdit(0)" value="0" name="status">
                            <label for="status_off"> 禁用 </label>
                        </div>
                    </div>


                    <div class="form-group">
                        <div class="col-sm-8 col-sm-offset-3">
                            <button class="btn btn-primary" type="button" onclick="addUserSubmit()">提交</button>
                            <button type="button" id="add_close_button" class="btn btn-white" data-dismiss="modal">关闭</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
<!-- 添加用户弹窗结束 -->


<script>
    $(document).ready( function () {
        // 表单初始化
        dataTableInit();
    } );

    function statusEdit(status){
        if (status == 1){
            document.getElementById("status_off").removeAttribute("checked");
            document.getElementById("status_open").setAttribute("checked","checked");
        }else {
            document.getElementById("status_off").setAttribute("checked","checked");
            document.getElementById("status_open").removeAttribute("checked");
        }
    }
    function addStatusEdit(status){
        if (status == 1){
            document.getElementById("add_status_off").removeAttribute("checked");
            document.getElementById("add_status_open").setAttribute("checked","checked");
        }else {
            document.getElementById("add_status_off").setAttribute("checked","checked");
            document.getElementById("add_status_open").removeAttribute("checked");
        }
    }

    /**
     *
     * 打开 新增用户弹窗
     * */
    function openAddUser(){
        $("#add_user_id").val(null);
        $("#add_user_name").val(null);
        $("#add_user_nick_name").val(null);
        $("#add_user_phone").val(null);
        $("#add_user_email").val(null);
        $("#add_user_desc").val(null);

        document.getElementById("add_status_open").removeAttribute("checked");
        document.getElementById("add_status_off").removeAttribute("checked");

        $("#add_user_password").val(null);
        $("#add_user_password2").val(null);

    }


    function verificationName(){
        let name = $("#add_user_name").val();
        if (!getVal(name)){
            return;
        }
        let url = "/user/verificationName?name="+name;
        $.get(url,function (resp){
            let code = resp.code;
            if (code == 200){
                return true;
            }else {
                $("#add_user_name").val("");
                parent.layer.msg("账号已存在，请重新输入！");
                return false;
            }
        });
    }

    /**
     * 新增用户 弹窗 提交
     **/
    function addUserSubmit(){
        let id = $("#add_user_id").val();
        let name = $("#add_user_name").val();
        let nickName = $("#add_user_nick_name").val();
        let phone = $("#add_user_phone").val();
        let email = $("#add_user_email").val();
        let desc = $("#add_user_desc").val();
        let userType = $("#add_user_type").val();
        let password = null;
        let status = null;

        let statusOpen = document.getElementById("add_status_open").getAttribute("checked");
        let statusOff = document.getElementById("add_status_off").getAttribute("checked");
        console.log("add_statusOpen"+statusOpen);
        console.log("add_statusOff"+statusOff);
        let add_user_password = $("#add_user_password").val();
        let add_user_password2 = $("#add_user_password2").val();

        if (getVal(add_user_password)){
            if (getVal(add_user_password2)){
                if (add_user_password == add_user_password2){
                    password = add_user_password;
                }else {
                    parent.layer.msg("两次密码不一样，请重新输入密码！");
                    return false;
                }
            }else {
                parent.layer.msg("请再次输入密码！");
                return false;
            }
        }else {
            parent.layer.msg("请输入密码！");
            return false;
        }
        if (statusOpen != null){
            console.log("status 1");
            status = 1;
        }
        if (statusOff != null){
            console.log("status 0");
            status = 0;
        }
        let data = {};
        data.id = id;
        if (getVal(name)){
            data.name = name;
        }else {
            parent.layer.msg("账号不能为空");
            return false;
        }
        if (getVal(nickName)){
            data.nickName = nickName;
        }else {
            parent.layer.msg("昵称不能为空");
            return false;
        }
        data.phone = phone;
        data.email = email;
        data.desc = desc;
        data.userType = userType;
        if (getVal(status)){
            data.status = status;
        }else {
            parent.layer.msg("请选择状态");
            return false;
        }

        if (getVal(password)){
            data.password = password;
        }

        $.post("/user/insert",data,function (resp){
            if (resp.code == 200){
                location.reload();
            }
        });

    }


    /**
     * 修改用户 弹窗 提交
     */
    function updateUserSubmit(){
        let id = $("#up_user_id").val();
        let name = $("#up_user_name").val();
        let nickName = $("#up_user_nick_name").val();
        let phone = $("#up_user_phone").val();
        let email = $("#up_user_email").val();
        let desc = $("#up_user_desc").val();
        let userType = $("#up_user_type").val();
        let password = null;
        let status = null;

        let statusOpen = document.getElementById("status_open").getAttribute("checked");
        let statusOff = document.getElementById("status_off").getAttribute("checked");
        console.log("statusOpen"+statusOpen);
        console.log("statusOff"+statusOff);
        let up_user_password = $("#up_user_password").val();
        let up_user_password2 = $("#up_user_password2").val();
        if (up_user_password != null && up_user_password != undefined){
            if (up_user_password2 != null && up_user_password2 != undefined){
                if (up_user_password == up_user_password2){
                    password = up_user_password;
                }else {
                    alert("两次密码不一样，请重新输入密码！")
                    return;
                }
            }else {
                alert("请再次输入密码！");
                return;
            }
        }
        if (statusOpen != null){
            console.log("status 1");
            status = 1;
        }
        if (statusOff != null){
            console.log("status 0");
            status = 0;
        }
        let data = {};
        data.id = id;
        if (getVal(name)){
            data.name = name;
        }else {
            parent.layer.msg("账号不能为空");
            return;
        }
        if (getVal(nickName)){
            data.nickName = nickName;
        }else {
            parent.layer.msg("昵称不能为空");
            return;
        }
        data.phone = phone;
        data.email = email;
        data.desc = desc;
        data.status = status;
        data.userType = userType;

        if (getVal(password)){
            data.password = password;
        }

        $.post("/user/update",data,function (resp){
            if (resp.code == 200){
                location.reload();
            }
        });

    }

    function getVal(v){
        let a = !(!v);
        console.log("getVal:"+v +",a:"+a);
        return a ;
    }

    // update user 方法
    function update(id){
        $("#up_user_id").val(null);
        $("#up_user_name").val(null);
        $("#up_user_nick_name").val(null);
        $("#up_user_phone").val(null);
        $("#up_user_email").val(null);
        $("#up_user_desc").val(null);

        document.getElementById("status_open").removeAttribute("checked");
        document.getElementById("status_off").removeAttribute("checked");

        $("#up_user_password").val(null);
        $("#up_user_password2").val(null);

        // 根据Id 查询用户，并回显到 表格中
        let getUser = "/user/findUserById?id="+id;
        $.get(getUser,function (resp){

            if (resp.code == 200){
               let data = resp.data;
               if (data.id != null){
                   $("#up_user_id").val(data.id);
               }
               if (data.name != null){
                   $("#up_user_name").val(data.name);
               }
               if (data.nickName != null){
                   $("#up_user_nick_name").val(data.nickName);
               }
               if (data.phone != null){
                   $("#up_user_phone").val(data.phone);
               }
                if (data.email != null){
                    $("#up_user_email").val(data.email);
                }
                if (data.desc != null){
                    $("#up_user_desc").val(data.desc);
                }

                if (data.status != null){
                    if (data.status == 1){
                        document.getElementById("status_open").setAttribute("checked","checked");
                    }else {
                        document.getElementById("status_off").setAttribute("checked","checked");
                    }
                }
                $("#up_user_type").val(data.userType);
            }else {
                alert("获取用户信息失败！")
            }
        });
    }

    function dataTableInit(){
        $('#data_table_name_list').DataTable({
            "processing":true,
            "serverSide":false,
            "pageLength": 10,  //首次加载的数据条数
            "ordering": false, //排序操作在服务端进行，所以可以关了。
            "paging":true,
            "pagingType": "full_numbers",
            // "autoWidth": true,
            "searching": false,//禁用搜索
//                    "showRefresh":true,
            "ajax":{
                "url":"/user/findAllUsers",
                "type":"post",
                "data": function (d){

                }
            },
            "columns":[
                {"data":'id'},
                {"data":'name'},
                {"data":'nickName'},
                {"data":'email'},
                {"data":'phone'},
                {"data":'desc'},
                {"data":'userType',
                    render : function (data,type,row) {
                        if (data == 1){
                            return "管理员";
                        }else {
                            return "普通用户";
                        }
                    }
                },
                {"data":'status',
                    render : function (data,type,row) {
                        if (data == 1){
                            return "有效";
                        }else {
                            return "无效";
                        }
                    }
                },
                {"data":'createTime',
                    render : function (data,type,row) {
                        let d = new Date(data);
                        let date = (d.getFullYear()) + "-" +
                            (d.getMonth() + 1) + "-" +
                            (d.getDate()) + " " +
                            (d.getHours()) + ":" +
                            (d.getMinutes()) + ":" +
                            (d.getSeconds());
                        return date;
                    }},
                {"data":'updateTime',
                    render : function (data,type,row) {
                        let d = new Date(data);
                        let date = (d.getFullYear()) + "-" +
                            (d.getMonth() + 1) + "-" +
                            (d.getDate()) + " " +
                            (d.getHours()) + ":" +
                            (d.getMinutes()) + ":" +
                            (d.getSeconds());
                        return date;
                    }
                },
                {"data":'lastLoginTime',
                    render : function (data,type,row) {
                        let d = new Date(data);
                        let date = (d.getFullYear()) + "-" +
                            (d.getMonth() + 1) + "-" +
                            (d.getDate()) + " " +
                            (d.getHours()) + ":" +
                            (d.getMinutes()) + ":" +
                            (d.getSeconds());
                        return date;
                    }
                }
            ],
            "columnDefs":[
                {
                    "targets" : 11,//操作按钮目标列
                    "data":null,
                    "render" : function(data, type, row) {
                        let id = '"' + data.id + '"';
                        let html = "<button type='button' class='btn btn-primary btn-xs'  data-toggle='modal' data-target='#myModal' onclick="+"update("+id+")"+">修改</button>";
                        return html;
                    }

                }
            ],
/*
            language: {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            }
*/
        });
    }

    //刷新数据,方法无须更改可以直接复用
    function RefreshTable(tableId, urlData){
        $.getJSON(urlData, null, function( json )
        {
            table = $(tableId).dataTable();
            oSettings = table.fnSettings();
            table.fnClearTable(this);//动态刷新关键部分语句，只会根据后台数据有变化才会刷新
            for (var i=0; i<json.length; i++)
            {
                table.oApi._fnAddData(oSettings, json[i]);//注意取得的jason串的字符数量，要与html中列的数量要有对应
            }
            oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
            table.fnDraw();
        });
    }

</script>
<div style="text-align:center;"></div>


</body>

</html>
